<template>
  <div class="m-task-match">
    <div
      class="nav-node"
      v-for="$item in listData"
      :key="$item.text"
      @click="$router.push($item.route)"
    >
      <div class="node-left">
        <i :class="['iconfont', $item.icon]"></i>
        <div class="node-info">
          <em>{{$item.text}}</em>
          <span>{{$item.info}}</span>
        </div>
      </div>
      <i class="iconfont icon-arrow-right-s-line"></i>
    </div>

        <button class="match-button" @click="goBuy">匹配审核</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "Tab-2"
})
export default class extends Vue {
  listData = [
    {
      icon: "icon-search-eye-line",
      text: "匹配中",
      info: "正在匹配审核中",
      route: "/matching"
    },
    {
      icon: "icon-checkbox-circle-line",
      text: "已匹配",
      info: "已经匹配成功",
      route: "/match_yes"
    },
    {
      icon: "icon-time-line",
      text: "历史匹配",
      info: "过去已经匹配过的",
      route: "/match_history"
    }
  ];
    goBuy() {
        this.$router.push("/review");
    }
}
</script>
